<script lang="ts" setup>
import { More, Search, User, ArrowLeft } from "@element-plus/icons-vue";
const liItem = ref([
  {
    to: "/category",
    icon: markRaw(More),
  },
  {
    to: "/",
    icon: markRaw(Search),
  },
  {
    to: "/",
    text: "PICX",
  },
  {
    to: "/user",
    icon: markRaw(User),
  },
  {
    to: "/",
    icon: markRaw(ArrowLeft),
  },
]);
</script>
<template>
  <nav>
    <ul class="nav-ul">
      <li class="nav-item" v-for="item in liItem" :key="item.to">
        <router-link :to="item.to">
          <div v-if="item.icon">
            <component :is="item.icon" />
          </div>
          <div v-else style="font-size: small">
            {{ item.text }}
          </div>
        </router-link>
      </li>
    </ul>
  </nav>
</template>
<style lang="scss" scoped>
$width: 3rem;
nav {
  position: fixed;
  left: 1.4rem;
  bottom: 1.4rem;
  background-color: lightgray;
  border-radius: 2rem;
  z-index: 999;
  width: $width;
  height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
  @media screen and (max-width: 600px) {
    left: calc(50vw - ($width / 2));
    transform: rotate(-90deg);
    bottom: -2.5rem;
  }
  a {
    width: 20px;
    @media screen and (max-width: 600px) {
      transform: rotate(90deg);
    }
    // svg {
    //   @media screen and (max-width: 600px){
    //   transform: rotate(0deg);
    // }
  }
}
svg {
  @media screen and (max-width: 600px) {
    transform: rotate(0deg);
  }
}
.nav-ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.nav-item {
  display: flex;
  width: 2rem;
  height: 2rem;
  justify-content: center;
  align-items: center;
}
</style>
